<div class="main-container">
    <div class="container">
        <ng-container *ngTemplateOutlet="Explore; context: {expContainer: localExport}"></ng-container>
    </div>
    <div class="container">
        <!-- <ng-container *ngTemplateOutlet="Explore"></ng-container> -->
    </div>
</div>

<ng-template #Explore let-expConainer="expContainer"> 
    <ul class="tabs">
        <li *ngFor="let explore of expConainer.explores; let idx = index;" [ngClass]="{active: idx == expConainer.activeIdx}" (click)="expConainer.setActive(idx)">
            {{explore.name}}
        </li>
    </ul>
    <ng-container *ngFor="let explore of expConainer.explores; let idx = index;">
        <div class="active-tree" [ngStyle]="{zIndex: idx == expConainer.activeIdx?1:0}">
            <div class="active-path">当前选中路径：{{explore.choosedPath}}</div>
            <div class="content">
                <ng-container *ngTemplateOutlet="tpl; context: {list: explore.dirs, explore: explore}"></ng-container>
            </div>
        </div>        
    </ng-container>
</ng-template>

<ng-template let-list="list" let-explore="explore" #tpl>
    <!-- {{showVal('let-explore',explore)}} -->
    <div class="item" *ngFor="let item of list">
        <div class="current">
            <div class="info">
                <ng-container *ngIf="item.isDir == true">
                    <i nz-icon [nzType]="item.isClose != true?'folder-open':'folder'" nzTheme="outline"
                        (click)="explore.toggleFloderStatus(item)" style="color: blueviolet;"></i>&nbsp;
                    <span [title]="item.fullPath" style="cursor: pointer;" (click)="explore.selectPath(item)">{{item.name}}</span>
                </ng-container>
                <ng-container *ngIf="item.isDir == false">
                    <i nz-icon nzType="file" nzTheme="outline" style="color: burlywood;"></i>&nbsp;
                    <span [title]="item.fullPath">{{item.name}}</span>
                    <span style="color: darkviolet;">&nbsp;&nbsp;{{optSize(item.size)}}</span>
                </ng-container>
            </div>
            <div class="operate">
                <i *ngIf="item.isDir == true" class="op-item" nz-icon nzType="upload" nzTheme="outline"
                    title="上传文件" (click)="uploadFiles(item, list)"></i>
                <i class="op-item" *ngIf="item.isDir == true" nz-icon nzType="folder-add" nzTheme="outline"
                    title="创建文件夹" (click)="showCreateFolderModal(item, list)"></i>
                <i class="op-item" nz-icon nzType="delete" nzTheme="outline" [title]="item.isDir == true?'删除文件夹':'删除文件'"
                    nz-popconfirm nzPopconfirmTitle="是否删除《{{item.name}}》?" nzPopconfirmPlacement="bottom"
                    (nzOnConfirm)="delete(item, list)">
                </i>
            </div>
        </div>
        <div class="children" *ngIf="item.isClose != true">
            <ng-container *ngTemplateOutlet="tpl; context: {list: item.children, explore: explore}"></ng-container>
        </div>
    </div>
</ng-template>
